<template>
	<view class="address-new">
		<view class="input-item">
			<label>姓名:</label>
			<input type="text" value="" placeholder="请填写收货人" />
		</view>
		<view class="input-item">
			<label>电话:</label>
			<input type="number" value="" placeholder="请填写收货人联系电话" />
		</view>
		<view class="input-item">
			<label>地区:</label>
			<text @click="showMulLinkageThreePicker">{{areaLabel}}</text>
		</view>
		<view class="input-item input-item-last">
			<label>详细地址:</label>
			<input type="text" value="" placeholder="请填写详细地址" />
		</view>
		
		<view class="btn-item">
			<view class="btn-save" @tap="toAddressManage">
				保存收货地址
			</view>
			<view class="btn-del" @tap="toAddressManage">
				删除收货地址
			</view>
		</view>
		
		<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm"></mpvue-city-picker>

	</view>
</template>

<script>
	import mpvueCityPicker from 'mpvue-citypicker';

	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				pickerValueDefault: [0, 0, 1],
				areaLabel:"山东省-淄博市-张店区",
			}
		},
		methods: {
			showMulLinkageThreePicker() {
				// console.log(123);
				this.$refs.mpvueCityPicker.show()
			},
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
				console.log("confirm");
				// console.log(e.label);
				this.pickerValueDefault = e.value;
				this.areaLabel = e.label
			},
			toAddressManage(){
				uni.navigateTo({
					url:"/pages/own/address-manage"
				})
			}
		}
	}
</script>

<style lang="scss">
	.address-new {
		margin-top: 20upx;
		width: 100%;
		color: #666666;


		.input-item {
			border-top: 1px solid rgba(228, 228, 228, 1);
			padding: 20upx;
			padding-left: 20upx;
			display: flex;
			flex-direction: row;
			align-items: center;

			label {
				width: 20%;
			}
		}
		
		.input-item-last {
			border-bottom: 1px solid rgba(228, 228, 228, 1);
		}
		
		.btn-item {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			
			padding: 20upx;
		}
		
		.btn-save {
			margin: 10upx;
			background-color: rgba(255, 102, 0, 1);
			color: #FFFFFF;
			width: 95%;
			text-align: center;
			padding: 20upx;
		}
		
		.btn-del{
			margin: 10upx;

			background-color:rgba(242, 242, 242, 1);
			color: #666666;
			width: 95%;
			text-align: center;
			padding: 20upx;

		}
	}
</style>
